<!-- 头部组件 -->
<template>
	<div class="footer">
		<div class="footer-logo">
			<div>
				<div>
					<img :src="picUrl" alt="">
				</div>
			</div>
			<div class="footer-content">
				<span>{{ play.playInfo[play.playIndex] ? play.playInfo[play.playIndex].name : '网易云音乐' }}</span>
				<div class="arName" v-if="play.playInfo[play.playIndex]">
					<span v-for="na in play.playInfo[play.playIndex].ar">{{ play.playInfo[play.playIndex].ar[0] === na ? na.name : ' / ' + na.name }}</span>
				</div>
			</div>
		</div>
		<div class="audio-box">
			<audio-player ref="player" :audio-list="audioList" :before-play="handleBeforePlay"
				theme-color="#ff2929" disabled-progress-drag  />
		</div>
		<FooterRightr />


	</div>
</template>

<script setup lang="ts">
import FooterCenter from './FooterCenter.vue'
import FooterRightr from './FooterRight.vue'
import { playIdStore, type IPlayInfo } from '@/stores/playSong';
import { watch, ref, onMounted } from 'vue';
import { getMusicUrlApi, checkMusicApi } from '@/api/songs'

const play = playIdStore()
interface IAudioList {
	name: string,
	url: string
}
let picUrl = ref('https://ts1.cn.mm.bing.net/th/id/R-C.140964a3a0b4426b710961f71c86726f?rik=9XLrgr%2bIrFBigA&riu=http%3a%2f%2fandroid-artworks.25pp.com%2ffs08%2f2017%2f11%2f20%2f7%2f110_bfb65e518966d407c0605c2da5568a2c_con.png&ehk=8dOie94Gl%2bx7kZnC40GhmprdUW4uFGUBRGrywygjMGA%3d&risl=&pid=ImgRaw&r=0')
const audioList = ref<string[]>([])
const audioName = ref<string[]>([])

const player = ref(null)

const updateList = () => {
	audioList.value = []
	audioName.value = []
	play.playInfo.forEach(item => {
		audioName.value.push(item.name)
	})
	play.playArrIds.forEach(item => {
		audioList.value.push(`https://music.163.com/song/media/outer/url?id=${item}.mp3`)
	})
}

watch(() => play.playId, (val) => {
	updateList()
	player.value.currentPlayIndex = play.playIndex
	player.value.playPrev()
	player.value.playNext()
	picUrl = play.playInfo[play.playIndex].al.picUrl
}, { flush: 'post' })



const handleBeforePlay = (next) => {
	play.playIndex = player.value.currentPlayIndex
	localStorage.setItem('playIndex', player.value.currentPlayIndex)
	picUrl = play.playInfo[play.playIndex].al.picUrl
	next()
}

onMounted(() => {
	player.value.currentPlayIndex = play.playIndex
})

</script>

<style lang="scss">
@import '@/styles/config.scss';

.footer {
	height: 10%;
	width: 100%;
	background-color: $globalColor;
	border-top: 1px solid #454545;
	display: flex;
	justify-content: space-between;


	&-logo {
		height: 100%;
		width: 30%;
		display: flex;

		& > div {
			width: 4vw;
			height: 4vw;
			margin: 0.5vw;
			border-radius: 10%;
			overflow: hidden;
		}
	}

	&-content {
		width: 5rem;
		flex: 1;
		margin: 10px 20px;
		display: flex;
		flex-direction: column;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

		& > span {
			color: #B6B6D0;
			font-size: 1.2vw;
		}

		& > .arName {
			color: #B6B6D0;
			font-size: 1.2vw;
		}

		&-icon-like {
			flex: 1;
			margin-left: 20px;
		}
	}

	&-block {
		margin: 10px;
	}

	.audio-box {
		align-self: center;
		position: relative;

		.audio-player {
			width: 32vw;
			margin-top: 0.5vw;

			.audio__progress-wrap {
				margin-top: 0.5vw !important;
				width: 24vw;
				margin: 0 auto 1.2vw;
				z-index: 9;
			}

			.audio__time-wrap {
				position: absolute;
				bottom: .5vw;
				width: 100%;

				.audio__current-time, .audio__duration {
					font-size: 1.2vw;
				}

			}
		}
	}

	.audio__notice {
		display: none !important;
	}

	

}
</style>